<template>
  <view class="notesPage_box">
    <!-- 无数据-缺省頁 -->
    <DefaultPage
      tips="暂时没找到相关带货笔记"
      :custoBtn="true"
      type="2"
      :minusHeight="0"
      v-if="!graphicList.length && !getParams.loading"
    >
    </DefaultPage>
    <!-- 图文列表 -->
    <ScrollList
      ref="scrollView"
      v-else
      :minusHeight="0"
      @interrupt="interruptFn"
      @scrolltolower="scrolltolower"
    >
      <template slot="content" class="u-m-t-24">
        <view class="notes_msg_list" v-for="(graphic,index) in graphicList" :key="index">
          <view class="notes_data_box">
            <!-- 用户信息 -->
            <view class="user_box items-center u-m-b-24">
              <image class="user_head_img" mode="aspectFill" :src="graphic.communityLogo || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'" alt="">
              <text class="fz-14">{{graphic.communityName}}</text>
              <text class="identifying_box" v-if="graphic.isSuperior">供货</text>
            </view>
            <!-- 图片区域 -->
            <ImageLayout :images="graphic.materialMediaRespVOList"/>
            <!-- 标题 -->
            <view class="title_box" :class="{'title_box_two':graphic.showTitle}">{{graphic.title}}</view>
            <view class="viewAll_btn viceColor u-m-t-20" v-if="graphic.showTitle" @click.stop="viewAllTitleFn(graphic,index)">查看全部</view>
            <!-- 数据展示 -->
            <view class="data_msg_list u-m-t-20">
              <view class="data_msg_box">
                <text class="">{{graphic.conversionRate || 0}}%</text>
                <p class="fz-10 viceColor u-m-t-8">转化率</p>
              </view>
              <view class="data_msg_box">
                <text>{{graphic.orderCount || 0}}</text>
                <p class="fz-10 viceColor u-m-t-8">成交数</p>
              </view>
              <view class="data_msg_box">
                <text>{{graphic.useCount || 0}}</text>
                <p class="fz-10 viceColor u-m-t-8">使用次数</p>
              </view>
            </view>
            <!-- 操作按钮 -->
            <view class="operation_btn_list u-m-t-20">
              <button class="red_btn multiplex_btn" @click.stop="_copyMaterial(graphic)" hover-class="hover">{{graphic.isNeedPay==1?`${graphic.needPayRatio}%佣金复用`:'免费复用'}}</button>
            </view>
          </view>
        </view>
        <view class="notGoodsSquare" v-if="getParams.finish">没有更多了~</view>
      </template>
    </ScrollList>
    
    <!-- 复用笔记 -->
    <Modal 
    :show="clickMaterial.modelShow"
    title="复用带货笔记"
    :content="clickMaterial.content" 
    configText="立即复用"
    @close="clickMaterial.modelShow = false" 
    @config="_configCopyMaterial" />
  </view>
</template>

<script>
import ImageLayout from '@/components/imageLayout/index.vue'
import DefaultPage from "@/components/defaultPage/index.vue"
import ScrollList from '@/components/scrollList/index.vue'
import release from "@/api/release.js"
import Modal from '@/components/modal/index.vue'

export default {
  components: { ImageLayout, DefaultPage, ScrollList,Modal },
  props: {
    mediaType: {
      type: String | Number,
      default: '1'
    },
    sortType: {
      type: String | Number,
      default: '1'
    },
    spuId: {
      type: String | Number,
      default: ''
    },
    shopWindowId: {
      type: String | Number,
      default: ''
    }
  },
  watch: {
    sortType(nVal){
      if (this.mediaType==1) { // 必等于1是图片才刷新
        this.getParams = {
          ...this.getParams,
          currentPage: 1,
          sortType: nVal
        }
        this.getGraphicListFn()
      }
    },
  },
  data () {
    return {
      getParams: {
        currentPage: 1,
        pageSize: 10,
        finish: false, // 是否还有更多
        loading: true,
        mediaType: 1,
        sortType: 1,
        spuId: '',
      },
      graphicList: [],
      timeout: null,

      clickMaterial: {
        modelShow: false,
        materialId: "",
        content: ""
      },
    }
  },
  created() {
    this.getGraphicListFn()
  },
  methods: {
    // 点击笔记复用
    _copyMaterial(item){
      this.clickMaterial.materialId = item.materialId
      if(item.isNeedPay){ // 需要支付佣金
        this.clickMaterial.modelShow = true
        if(item.isGoodsIssuer && item.isGoodsIssuer === 1){ // 供货
          this.clickMaterial.content = "复用当前笔记发布后，卖货出单后，你需要将帮卖佣金的10%支付给笔记创作者。"
        }else{
          this.clickMaterial.content = "复用当前笔记发布后，卖货出单后，你需要将你获得佣金的10%支付给笔记创作者。"
        }
      }else{
        this._configCopyMaterial()
      }
    },
    // 确定复用
    _configCopyMaterial (data) { // 使用笔记
      this.clickMaterial.modelShow = false
      this.navigateTo({url: `/pagesA/release/issueEdit?materialId=${this.clickMaterial.materialId}&shopWindowId=${this.shopWindowId}`})
    },
    async getGraphicListFn () {
      this.getParams.loading = true
      this.getParams.spuId = this.spuId
      const { data } = await release.getPageBySpuId(this.getParams)
      if (data.records) {
        data.records.forEach((item, i) => { // 处理image为字符串的问题
          data.records[i] = {
            ...data.records[i],
            showTitle: item.title.length>47?true:false, // 添加一个字段来判断显示隐藏查看全部
          }
        })
        if (this.getParams.currentPage === 1) {
          this.graphicList = data.records
        } else {
          this.graphicList.push(...data.records)
        }
        this.getParams.finish = this.getParams.currentPage * this.getParams.pageSize !== this.graphicList.length
      }
      this.getParams.loading = false
    },
    // 加载更多
    async scrolltolower() {
      if (this.getParams.finish) {
        this.$refs.scrollView.loadFinish(3); // 加载完成，是否还有更多
        return
      }
      this.getParams.currentPage += 1;
      await this.getGraphicListFn();
      this.$refs.scrollView.loadFinish(this.getParams.finish ? 3 : 0); // 加载完成，是否还有更多
    },
    // 下拉刷新方法，刷新完毕调用组件方法改变状态
    interruptFn() {
      if (this.timeout) clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.getParams.finish = false
        this.getParams.currentPage = 1
        this.getGraphicListFn()
        this.$refs.scrollView.refreshFinish() // 刷新完成
      }, 400);
    },
    viewAllTitleFn (data,index) {
      this.graphicList[index].showTitle = false
    },
  }
}
</script>

<style lang="scss" scoped>
@import './takeNotes.scss';
</style>